<!--  -->
<template>
  <div class="sylogins">
    <!-- 头部标题 -->
    <headMain />
    <!-- 标题+返回 -->
    <div class="wpbt">
      <img src="@/images/wprz.png" alt="" class="wpbtimg" />
      <div class="tool backfh" @click="backfn">
        <img src="@/images/back.png" alt="" class="normal" />
        <img src="@/images/backac.png" alt="" class="active" />
      </div>
    </div>
    <!-- 侧边任务栏 -->
    <div class="cbtask">
      <div
        class="tool cbtaskitem"
        v-for="item in cbtaskdata"
        :key="item.id"
        @click="cbstep = item.id"
      >
        <img :src="item.src" alt="" class="normal" v-if="cbstep != item.id" />
        <img :src="item.srcac" alt="" class="active" v-if="cbstep != item.id" />
        <img :src="item.srcac" alt="" v-if="cbstep == item.id" />
      </div>
    </div>
    <!-- 物品认知盒子 -->
    <div class="wprzbox" v-if="cbstep == 1">
      <div class="tbtask">
        <div
          class="tool tbtaskitem"
          v-for="item in tbtask"
          :key="item.id"
          @click="tbstep = item.id"
        >
          <img
            :src="item.src"
            alt=""
            class="normal"
            v-if="tbstep != item.id"
            :class="'tbtaskitem' + item.id"
          />
          <img
            :src="item.srcac"
            alt=""
            class="active"
            v-if="tbstep != item.id"
            :class="'tbtaskitem' + item.id"
          />
          <img
            :src="item.srcac"
            alt=""
            v-if="tbstep == item.id"
            :class="'tbtaskitem' + item.id"
          />
        </div>
      </div>
      <div
        class="wpmain"
        v-for="item in wpdata"
        :key="item.id"
        v-show="item.id == tbstep"
      >
        <div class="wpitem wpitems">
          <img :src="item.src" alt="" />
        </div>
        <div class="wpitem wpitemss" v-if="item.id == tbstep">
          <show-mxs :mxmtnumber="mxmtnumber" />
        </div>
      </div>
    </div>
    <!-- 试题 -->
    <ques-tion :qustion="qustion" v-if="cbstep == 2" @tmwc="tmwc" />
  </div>
</template>

<script>
import headMain from './headMain.vue'
import QuesTion from './quesTion.vue'
import ShowMxs from './showMxs.vue'

//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { headMain, QuesTion, ShowMxs },
  data() {
    //这里存放数据
    return {
      mxmtnumber: 'DR.glb',
      cbtaskdata: [
        {
          id: 1,
          src: require('@/images/wpjs.png'),
          srcac: require('@/images/wpjsac.png')
        },
        {
          id: 2,
          src: require('@/images/ktcs.png'),
          srcac: require('@/images/ktcsac.png')
        }
      ],
      tbtask: [
        {
          id: 1,
          src: require('@/images/gpsyx.png'),
          srcac: require('@/images/gpsyxac.png')
        },
        {
          id: 2,
          src: require('@/images/zzdjcb.png'),
          srcac: require('@/images/zzdjcbac.png')
        },
        {
          id: 3,
          src: require('@/images/xsczcst.png'),
          srcac: require('@/images/xsczcstac.png')
        },
        {
          id: 4,
          src: require('@/images/gdbdfblcsk.png'),
          srcac: require('@/images/gdbdfblcskac.png')
        },
        {
          id: 5,
          src: require('@/images/ddbdfbljcmt.png'),
          srcac: require('@/images/ddbdfbljcmtac.png')
        },
        {
          id: 6,
          src: require('@/images/pbtcq.png'),
          srcac: require('@/images/pbtcqac.png')
        },
        {
          id: 7,
          src: require('@/images/10.png'),
          srcac: require('@/images/10ac.png')
        },
        {
          id: 8,
          src: require('@/images/2bei.png'),
          srcac: require('@/images/2beiac.png')
        }
      ],
      wpdata: [
        {
          id: 1,
          src: require('@/images/gpxjs.png')
        },
        {
          id: 2,
          src: require('@/images/wpzzd.png')
        },
        {
          id: 3,
          src: require('@/images/xscbd.png')
        },
        {
          id: 4,
          src: require('@/images/gdbd.png')
        },
        {
          id: 5,
          src: require('@/images/dfbd.png')
        },
        {
          id: 6,
          src: require('@/images/pbtc.png')
        },
        {
          id: 7,
          src: require('@/images/10tb.png')
        },
        {
          id: 8,
          src: require('@/images/2beitb.png')
        }
      ],
      cbstep: 1,
      tbstep: 1,
      qustion: [
        {
          id: 1, //题目id
          name: '判断题', //题目类型
          question:
            '使用分辨率测试卡时是将分辨率测试卡紧贴在图像增强器输入屏的边缘上', //题目名称
          options: [
            {
              id: 'A', //题目选项id
              name: 'A.正确' // 题目选项
            },
            {
              id: 'B',
              name: 'B.错误'
            }
          ],
          answer: ['B'], //正确答案
          des: '' //答案解析表述
        },
        {
          id: 2, //题目id
          name: '单选题', //题目类型
          question: '分辨率测试卡的结构形式是', //题目名称
          options: [
            {
              id: 'A', //题目选项id
              name: 'A.楔形 ' // 题目选项
            },
            {
              id: 'B',
              name: 'B.块形'
            },
            {
              id: 'C',
              name: 'C.栅条形'
            },
            {
              id: 'D',
              name: 'D.以上都'
            }
          ],
          answer: ['D'], //正确答案
          des: '' //答案解析表述
        },
        {
          id: 3, //题目id
          name: '单选题', //题目类型
          question: '关于非晶硅平板探测器的叙述,错误的是', //题目名称
          options: [
            {
              id: 'A', //题目选项id
              name: 'A.属于间接转换型平板探测器 ' // 题目选项
            },
            {
              id: 'B',
              name: 'B.常见的多为碘化铯+非晶硅型'
            },
            {
              id: 'C',
              name: 'C.碘化铯层的晶体直接生长在基板上'
            },
            {
              id: 'D',
              name: 'D.碘化铯针状结构明显增加了X线的伪影'
            },
            {
              id: 'E',
              name: 'E.X探测、图像采集和读出都是相互独立的过程'
            }
          ],
          answer: ['D'], //正确答案
          des: '' //答案解析表述
        },
        {
          id: 4, //题目id
          name: '单选题', //题目类型
          question: '表示空间分辨率的单位是', //题目名称
          options: [
            {
              id: 'A', //题目选项id
              name: 'A.HU' // 题目选项
            },
            {
              id: 'B',
              name: 'B.LP/mm'
            },
            {
              id: 'C',
              name: 'C.mm'
            },
            {
              id: 'D',
              name: 'D.ms'
            },
            {
              id: 'E',
              name: 'E.MB'
            }
          ],
          answer: ['B'], //正确答案
          des: '' //答案解析表述
        },
        {
          id: 5, //题目id
          name: '单选题', //题目类型
          question: '通过对分辨率测试卡的摄影，可以测量', //题目名称
          options: [
            {
              id: 'A', //题目选项id
              name: 'A.照片密度' // 题目选项
            },
            {
              id: 'B',
              name: 'B.照片对比度'
            },
            {
              id: 'C',
              name: 'C.胶片灰雾度'
            },
            {
              id: 'D',
              name: 'D.胶片感光度'
            },
            {
              id: 'E',
              name: 'E.空间分辨率'
            }
          ],
          answer: ['E'], //正确答案
          des: '' //答案解析表述
        },
        {
          id: 6, //题目id
          name: '单选题', //题目类型
          question: 'SID 是指', //题目名称
          options: [
            {
              id: 'A', //题目选项id
              name: 'A、有效焦点的基准平面至基准轴线与患者皮肤x射线入射相交点的距离' // 题目选项
            },
            {
              id: 'B',
              name: 'B、有效焦点的基准平面至基准轴线与诊视床平面相交点的距离'
            },
            {
              id: 'C',
              name: 'C、有效焦点的基准平面至基准轴线与影像接收平面相交点的距离'
            },
            {
              id: 'D',
              name: 'D、有效焦点的基准平面至基准轴线与地面相交点的距离'
            }
          ],
          answer: ['C'], //正确答案
          des: '' //答案解析表述
        },
        {
          id: 7, //题目id
          name: '单选题', //题目类型
          question:
            ' 医用X射线摄影机质量控制检测指标光野与照射野中心的偏离判定标准为', //题目名称
          options: [
            {
              id: 'A', //题目选项id
              name: 'A.±1 mm' // 题目选项
            },
            {
              id: 'B',
              name: 'B.±2 mm'
            },
            {
              id: 'C',
              name: 'C.±2 cm'
            },
            {
              id: 'D',
              name: 'D.±1 cm'
            }
          ],
          answer: ['D'], //正确答案
          des: '' //答案解析表述
        },
        {
          id: 8, //题目id
          name: '单选题', //题目类型
          question:
            '依据《医用 X 射线诊断设备质量控制检测规范》X射线摄影设备的有用线束垂直度偏离状态检测判断标准为是', //题目名称
          options: [
            {
              id: 'A', //题目选项id
              name: 'A.≤1.5°' // 题目选项
            },
            {
              id: 'B',
              name: 'B.≤3°'
            },
            {
              id: 'C',
              name: 'C.≤6°'
            },
            {
              id: 'D',
              name: 'D.以上都不正确'
            }
          ],
          answer: ['B'], //正确答案
          des: '' //答案解析表述
        }
      ]
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    tbstep(val) {
      if (val == 1) {
        this.mxmtnumber = 'DR.glb'
      }
      if (val == 2) {
        this.mxmtnumber = 'ZhunZhiDuJianCeBan.glb'
      }
      if (val == 3) {
        this.mxmtnumber = 'XianShuChuiZhiCeShiTong.glb'
      }
      if (val == 4) {
        this.mxmtnumber = 'FenBianLvCeShiKa.glb'
      }
      if (val == 5) {
        this.mxmtnumber = 'DiFenBianLvJianCeMoTi.glb'
      }
      if (val == 6) {
        this.mxmtnumber = 'PingBanTanCeQi.glb'
      }
      if (val == 7) {
        this.mxmtnumber = 'TongPian.glb'
      }
      if (val == 8) {
        this.mxmtnumber = 'LiangDuXingKa.glb'
      }
    }
  },
  //方法集合
  methods: {
    backfn() {
      this.$router.push({
        name: 'index'
      })
    },
    tmwc() {
      this.backfn()
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped></style>
